<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>通知管理 - 1024导航后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981',
                        accent: '#F59E0B',
                        dark: '#1F2937',
                        light: '#F9FAFB',
                        danger: '#EF4444'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .sidebar-active {
                @apply bg-primary/10 text-primary border-l-4 border-primary;
            }
            .btn-action {
                @apply p-1.5 rounded hover:bg-gray-100 transition-colors;
            }
            .notification-unread {
                @apply bg-blue-50 border-l-4 border-primary;
            }
        }
    </style>
</head>

<body class="bg-gray-50 font-sans text-gray-800">
    <div class="flex h-screen overflow-hidden">
        <!-- 侧边栏 -->
        <aside class="w-64 bg-white shadow-sm flex-shrink-0 hidden md:block overflow-y-auto">
            <div class="p-4 border-b border-gray-100">
                <div class="text-primary text-xl font-bold">1024<span class="text-secondary">管理后台</span></div>
            </div>

            <nav class="p-4 space-y-1">
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-tachometer w-5 text-center mr-3"></i>
                    <span>控制台</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-th-large w-5 text-center mr-3"></i>
                    <span>资源管理</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-wrench w-5 text-center mr-3"></i>
                    <span>工具管理</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-users w-5 text-center mr-3"></i>
                    <span>用户管理</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-comments w-5 text-center mr-3"></i>
                    <span>社区内容</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm sidebar-active rounded">
                    <i class="fa fa-bell w-5 text-center mr-3"></i>
                    <span>通知管理</span>
                    <span class="ml-auto bg-primary text-white text-xs px-2 py-0.5 rounded-full">12</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-line-chart w-5 text-center mr-3"></i>
                    <span>数据统计</span>
                </a>

                <div class="border-t border-gray-100 my-3"></div>

                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-cog w-5 text-center mr-3"></i>
                    <span>系统设置</span>
                </a>
                <a href="#" class="flex items-center px-4 py-3 text-sm text-gray-600 hover:bg-gray-50 rounded">
                    <i class="fa fa-question-circle w-5 text-center mr-3"></i>
                    <span>帮助中心</span>
                </a>
            </nav>
        </aside>

        <!-- 主内容区 -->
        <div class="flex-1 flex flex-col overflow-hidden">
            <!-- 顶部导航 -->
            <header class="bg-white shadow-sm z-10">
                <div class="container mx-auto px-4 py-3 flex justify-between items-center">
                    <button class="md:hidden text-gray-600 text-xl">
                        <i class="fa fa-bars"></i>
                    </button>

                    <div class="flex items-center space-x-4 ml-auto">
                        <div class="relative">
                            <button class="text-gray-600 hover:text-primary transition-colors">
                                <i class="fa fa-bell text-xl"></i>
                                <span
                                    class="absolute -top-1 -right-1 w-4 h-4 bg-red-500 rounded-full text-white text-xs flex items-center justify-center">12</span>
                            </button>
                        </div>

                        <div class="relative group">
                            <button
                                class="flex items-center space-x-2 px-3 py-1.5 rounded-full bg-gray-100 hover:bg-gray-200 transition-colors">
                                <img src="https://picsum.photos/id/1005/40/40" alt="管理员头像"
                                    class="w-8 h-8 rounded-full object-cover">
                                <span class="hidden md:inline-block text-sm font-medium">管理员</span>
                                <i class="fa fa-angle-down text-gray-500"></i>
                            </button>
                            <div
                                class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg py-2 z-10 hidden group-hover:block">
                                <a href="profile.html"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">个人中心</a>
                                <a href="settings.html"
                                    class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">账号设置</a>
                                <div class="border-t border-gray-100 my-1"></div>
                                <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">退出登录</a>
                            </div>
                        </div>
                    </div>
                </div>
            </header>

            <!-- 页面内容 -->
            <main class="flex-1 overflow-y-auto bg-gray-50 p-4 md:p-6">
                <div class="max-w-7xl mx-auto">
                    <!-- 页面标题 -->
                    <div class="mb-6">
                        <h1 class="text-2xl font-bold text-gray-800">通知管理</h1>
                        <p class="text-gray-500 mt-1">查看和管理系统中的所有通知消息</p>
                    </div>

                    <!-- 数据概览 -->
                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
                        <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm">总通知数</p>
                                    <h3 class="text-2xl font-bold mt-1">256</h3>
                                </div>
                                <div
                                    class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary">
                                    <i class="fa fa-bell"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center text-sm">
                                <span class="text-green-600 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 8.2%
                                </span>
                                <span class="text-gray-500 ml-2">较上月</span>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm">未读通知</p>
                                    <h3 class="text-2xl font-bold mt-1">12</h3>
                                </div>
                                <div
                                    class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600">
                                    <i class="fa fa-circle-o"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center text-sm">
                                <span class="text-red-600 flex items-center">
                                    <i class="fa fa-arrow-up mr-1"></i> 3
                                </span>
                                <span class="text-gray-500 ml-2">较昨日</span>
                            </div>
                        </div>

                        <div class="bg-white rounded-xl shadow-sm p-5 card-hover">
                            <div class="flex items-center justify-between">
                                <div>
                                    <p class="text-gray-500 text-sm">系统通知</p>
                                    <h3 class="text-2xl font-bold mt-1">48</h3>
                                </div>
                                <div
                                    class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600">
                                    <i class="fa fa-cog"></i>
                                </div>
                            </div>
                            <div class="mt-4 flex items-center text-sm">
                                <span class="text-green-600 flex items-center">
                                    <i class="fa fa-arrow-down mr-1"></i> 2.5%
                                </span>
                                <span class="text-gray-500 ml-2">较上周</span>
                            </div>
                        </div>
                    </div>

                    <!-- 通知管理工具栏 -->
                    <div class="bg-white rounded-xl shadow-sm p-5 mb-6">
                        <div class="flex flex-col md:flex-row md:items-center justify-between gap-4">
                            <div class="flex flex-1 flex-col sm:flex-row gap-4">
                                <div class="relative flex-1 max-w-md">
                                    <span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">
                                        <i class="fa fa-search"></i>
                                    </span>
                                    <input type="text" placeholder="搜索通知内容、用户..."
                                        class="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                </div>

                                <div class="flex gap-4">
                                    <div>
                                        <select
                                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white">
                                            <option value="">全部类型</option>
                                            <option value="system">系统通知</option>
                                            <option value="resource">资源审核</option>
                                            <option value="user">用户操作</option>
                                            <option value="report">举报信息</option>
                                        </select>
                                    </div>

                                    <div>
                                        <select
                                            class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary bg-white">
                                            <option value="">全部状态</option>
                                            <option value="unread">未读</option>
                                            <option value="read">已读</option>
                                        </select>
                                    </div>
                                </div>
                            </div>

                            <div class="flex gap-3">
                                <button
                                    class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors flex items-center">
                                    <i class="fa fa-check mr-2"></i> 全部标为已读
                                </button>
                                <button
                                    class="px-4 py-2 border border-gray-300 rounded-md hover:bg-gray-50 transition-colors flex items-center">
                                    <i class="fa fa-trash mr-2"></i> 清空已读
                                </button>
                            </div>
                        </div>
                    </div>

                    <!-- 通知列表 -->
                    <div class="bg-white rounded-xl shadow-sm overflow-hidden mb-6">
                        <div class="overflow-x-auto">
                            <table class="w-full">
                                <thead>
                                    <tr class="bg-gray-50 border-b border-gray-200">
                                        <th
                                            class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-10">
                                            <input type="checkbox"
                                                class="rounded border-gray-300 text-primary focus:ring-primary">
                                        </th>
                                        <th
                                            class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            通知内容
                                        </th>
                                        <th
                                            class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            类型
                                        </th>
                                        <th
                                            class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            时间
                                        </th>
                                        <th
                                            class="px-6 py-4 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            状态
                                        </th>
                                        <th
                                            class="px-6 py-4 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">
                                            操作
                                        </th>
                                    </tr>
                                </thead>
                                <tbody class="divide-y divide-gray-200">
                                    <!-- 通知项1 - 未读 -->
                                    <tr class="notification-unread hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <input type="checkbox"
                                                class="rounded border-gray-300 text-primary focus:ring-primary">
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-start">
                                                <div
                                                    class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-primary mr-3 flex-shrink-0">
                                                    <i class="fa fa-user-plus"></i>
                                                </div>
                                                <div>
                                                    <p class="text-sm font-medium">新用户「王小明」注册成功</p>
                                                    <p class="text-gray-500 text-xs mt-1">用户ID: #U20230518001，邮箱:
                                                        wangxm@example.com</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            用户操作
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            2023-05-18 09:24:15
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">未读</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <div class="flex justify-end space-x-1">
                                                <button class="btn-action text-gray-600 hover:text-primary"
                                                    title="标记为已读">
                                                    <i class="fa fa-check"></i>
                                                </button>
                                                <button class="btn-action text-gray-600 hover:text-danger" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                    <!-- 通知项2 - 未读 -->
                                    <tr class="notification-unread hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <input type="checkbox"
                                                class="rounded border-gray-300 text-primary focus:ring-primary">
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-start">
                                                <div
                                                    class="w-10 h-10 rounded-full bg-red-100 flex items-center justify-center text-red-600 mr-3 flex-shrink-0">
                                                    <i class="fa fa-flag"></i>
                                                </div>
                                                <div>
                                                    <p class="text-sm font-medium">资源「免费影视网站」被举报</p>
                                                    <p class="text-gray-500 text-xs mt-1">举报原因: 涉嫌侵权，举报用户: #U20230402015
                                                    </p>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            举报信息
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            2023-05-18 08:12:36
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full">未读</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <div class="flex justify-end space-x-1">
                                                <button class="btn-action text-gray-600 hover:text-primary"
                                                    title="查看详情">
                                                    <i class="fa fa-eye"></i>
                                                </button>
                                                <button class="btn-action text-gray-600 hover:text-primary"
                                                    title="标记为已读">
                                                    <i class="fa fa-check"></i>
                                                </button>
                                                <button class="btn-action text-gray-600 hover:text-danger" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                    <!-- 通知项3 - 已读 -->
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <input type="checkbox"
                                                class="rounded border-gray-300 text-primary focus:ring-primary">
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-start">
                                                <div
                                                    class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center text-green-600 mr-3 flex-shrink-0">
                                                    <i class="fa fa-check-circle"></i>
                                                </div>
                                                <div>
                                                    <p class="text-sm font-medium">资源「前端开发手册」已通过审核</p>
                                                    <p class="text-gray-500 text-xs mt-1">资源ID: #R20230517003，提交者:
                                                        #U20230315008</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            资源审核
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            2023-05-17 16:45:22
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">已读</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <div class="flex justify-end space-x-1">
                                                <button class="btn-action text-gray-600 hover:text-danger" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                    <!-- 通知项4 - 已读 -->
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <input type="checkbox"
                                                class="rounded border-gray-300 text-primary focus:ring-primary">
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-start">
                                                <div
                                                    class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3 flex-shrink-0">
                                                    <i class="fa fa-cog"></i>
                                                </div>
                                                <div>
                                                    <p class="text-sm font-medium">系统备份完成</p>
                                                    <p class="text-gray-500 text-xs mt-1">备份文件大小: 1.2GB，存储位置: 云端服务器</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            系统通知
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            2023-05-17 02:15:00
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">已读</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <div class="flex justify-end space-x-1">
                                                <button class="btn-action text-gray-600 hover:text-danger" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>

                                    <!-- 通知项5 - 已读 -->
                                    <tr class="hover:bg-gray-50 transition-colors">
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <input type="checkbox"
                                                class="rounded border-gray-300 text-primary focus:ring-primary">
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <div class="flex items-start">
                                                <div
                                                    class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600 mr-3 flex-shrink-0">
                                                    <i class="fa fa-exclamation-triangle"></i>
                                                </div>
                                                <div>
                                                    <p class="text-sm font-medium">服务器磁盘空间不足警告</p>
                                                    <p class="text-gray-500 text-xs mt-1">当前使用率: 89%，建议尽快清理或扩容</p>
                                                </div>
                                            </div>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            系统通知
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                            2023-05-16 18:30:45
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap">
                                            <span
                                                class="px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full">已读</span>
                                        </td>
                                        <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                            <div class="flex justify-end space-x-1">
                                                <button class="btn-action text-gray-600 hover:text-danger" title="删除">
                                                    <i class="fa fa-trash"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>

                        <!-- 分页 -->
                        <div class="px-6 py-4 border-t border-gray-200 flex items-center justify-between">
                            <div class="flex items-center">
                                <p class="text-sm text-gray-500">
                                    显示 <span class="font-medium">1</span> 到 <span class="font-medium">5</span> 条，共 <span
                                        class="font-medium">256</span> 条
                                </p>
                                <div class="ml-4">
                                    <select
                                        class="px-2 py-1 text-sm border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary">
                                        <option>10条/页</option>
                                        <option>20条/页</option>
                                        <option>50条/页</option>
                                        <option>100条/页</option>
                                    </select>
                                </div>
                            </div>

                            <div class="flex items-center space-x-1">
                                <button
                                    class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-500 hover:bg-gray-50 disabled:opacity-50 disabled:cursor-not-allowed"
                                    disabled>
                                    <i class="fa fa-angle-left"></i>
                                </button>
                                <button
                                    class="px-3 py-1 text-sm border border-primary bg-primary text-white rounded-md">1</button>
                                <button
                                    class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">2</button>
                                <button
                                    class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">3</button>
                                <button
                                    class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">4</button>
                                <button
                                    class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">5</button>
                                <button
                                    class="px-3 py-1 text-sm border border-gray-300 rounded-md bg-white text-gray-700 hover:bg-gray-50">
                                    <i class="fa fa-angle-right"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    </div>

    <!-- 回到顶部按钮 -->
    <button id="backToTop"
        class="fixed bottom-6 right-6 w-12 h-12 rounded-full bg-primary text-white shadow-lg flex items-center justify-center opacity-0 invisible transition-all duration-300">
        <i class="fa fa-arrow-up"></i>
    </button>

    <script>
        // 回到顶部按钮功能
        const backToTopBtn = document.getElementById('backToTop');

        window.addEventListener('scroll', () => {
            if (window.scrollY > 300) {
                backToTopBtn.classList.remove('opacity-0', 'invisible');
                backToTopBtn.classList.add('opacity-100', 'visible');
            } else {
                backToTopBtn.classList.remove('opacity-100', 'visible');
                backToTopBtn.classList.add('opacity-0', 'invisible');
            }
        });

        backToTopBtn.addEventListener('click', () => {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        });

        // 通知操作功能
        document.addEventListener('DOMContentLoaded', function () {
            // 标记为已读按钮
            const markAsReadBtns = document.querySelectorAll('.btn-action[title="标记为已读"]');
            markAsReadBtns.forEach(btn => {
                btn.addEventListener('click', function () {
                    const row = this.closest('tr');
                    row.classList.remove('notification-unread');

                    const statusCell = row.querySelector('td:nth-child(5) span');
                    statusCell.className = 'px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full';
                    statusCell.textContent = '已读';

                    // 移除查看按钮（如果存在）
                    const viewBtn = row.querySelector('.btn-action[title="查看详情"]');
                    if (viewBtn) {
                        viewBtn.remove();
                    }

                    // 更新未读计数（实际应用中应调用API）
                    updateNotificationCount(-1);
                });
            });

            // 全部标为已读按钮
            const markAllAsReadBtn = document.querySelector('button:has(.fa-check)');
            markAllAsReadBtn.addEventListener('click', function () {
                const unreadRows = document.querySelectorAll('.notification-unread');
                unreadRows.forEach(row => {
                    row.classList.remove('notification-unread');

                    const statusCell = row.querySelector('td:nth-child(5) span');
                    statusCell.className = 'px-2 py-1 text-xs font-medium bg-gray-100 text-gray-800 rounded-full';
                    statusCell.textContent = '已读';

                    // 移除查看按钮
                    const viewBtn = row.querySelector('.btn-action[title="查看详情"]');
                    if (viewBtn) {
                        viewBtn.remove();
                    }
                });

                // 更新未读计数为0
                updateNotificationCount(-parseInt(document.querySelector('.text-amber-600 + div h3').textContent));
            });

            // 删除按钮
            const deleteBtns = document.querySelectorAll('.btn-action[title="删除"]');
            deleteBtns.forEach(btn => {
                btn.addEventListener('click', function () {
                    const row = this.closest('tr');
                    const wasUnread = row.classList.contains('notification-unread');

                    // 移除行（实际应用中应调用API）
                    row.remove();

                    // 如果是未读通知，更新计数
                    if (wasUnread) {
                        updateNotificationCount(-1);
                    }

                    // 更新总通知数
                    const totalCountEl = document.querySelector('.text-primary + div h3');
                    totalCountEl.textContent = (parseInt(totalCountEl.textContent.replace(',', '')) - 1).toLocaleString();
                });
            });

            // 清空已读按钮
            const clearReadBtn = document.querySelector('button:has(.fa-trash)');
            clearReadBtn.addEventListener('click', function () {
                const readRows = document.querySelectorAll('tbody tr:not(.notification-unread)');
                readRows.forEach(row => row.remove());
            });

            // 更新通知计数的辅助函数
            function updateNotificationCount(change) {
                const unreadCountEl = document.querySelector('.text-amber-600 + div h3');
                const bellCountEl = document.querySelector('.fa-bell + span');
                const sidebarCountEl = document.querySelector('.fa-bell ~ span');

                const newCount = Math.max(0, parseInt(unreadCountEl.textContent) + change);
                unreadCountEl.textContent = newCount;
                bellCountEl.textContent = newCount;
                sidebarCountEl.textContent = newCount;

                // 如果计数为0，隐藏徽章
                if (newCount === 0) {
                    bellCountEl.classList.add('hidden');
                    sidebarCountEl.classList.add('hidden');
                } else {
                    bellCountEl.classList.remove('hidden');
                    sidebarCountEl.classList.remove('hidden');
                }
            }
        });
    </script>
</body>

</html>